<template>
    <div class="content">
        <!-- <div class="top">
            <h3 class="title">车检信息</h3>
            <ul>
                <li>号牌号码：{{order.carNum}}</li>
                <li>车辆类型：{{order.carType}}</li>
                <li>车检站名称：</li>
                <p v-if="order.orderType">
                    车检类型：{{order.orderType === 1?'综检':order.orderType === 2?'综检':'其他类别检测'}}
                </p>
                <p v-else>车检类型：{{order.type ===3?'到场检测':'预约检测'}}</p>
                <li>检测费用：{{order.orderAmount}}</li>
                <li>办理人  ：{{order.username}}</li>
            </ul>
            <div class="btn" @click="updateUsername">修改业务办理人</div>
        </div> -->
        <div class="btm">
            <h3 class="title">
                订单<span v-if="order.payTime">
                    {{order.refundStatus==1?'退款中':order.refundStatus==2?'已退款':'已支付'}}
                    </span>
                    <span v-else>未支付</span>
            </h3>
            <h4>订单支付明细</h4>
            <ul>
                <li>订单单号：{{order.orderNumber}}</li>
                <li>订单时间：{{order.createTime}}</li>
                <li v-if="order.payTime">支付时间：
                    <span>{{order.payTime|dateStyle}}</span>
                </li>
                <li>车检站名称：大厂全顺机动车检测有限公司</li>
                <li>车检项目：
                    <span v-if="order.orderType">
						{{order.orderType === 1?'综检':order.orderType === 2?'综检':order.orderType === 7?'六年免检':'其他类别检测'}}
					</span>
					<span v-else>{{order.type ===3?'到场检测':'预约检测'}}</span>
                </li>
                <li>贵宾卡优惠：{{order.couponAmount?order.couponAmount:0}}元</li>
                <li v-if="order.orderAmount">车检支付：{{order.orderAmount}}元</li>
                <li v-if="order.refundStatus==2">车检退款：{{order.refundAmount}}元</li>
                <li v-if="order.payAmount">微信支付：{{order.payAmount}}元</li>
                <li v-if="order.printDate">出单时间：
                    <span v-if="order.printDate">{{order.printDate}}</span>
                </li>
            </ul>
            <div v-if="(!order.orderType && order.type !=3) && order.payTime" @click="updateTimes" class="btn">修改预约时间</div>
        </div>
        <van-popup v-model="show" @close="closePopup">
            <div class="update_username">
                <h3>修改办理人：</h3>
                <div class="center">
                    <van-field input-align='center' v-model="username" placeholder="请输入办理人姓名" />
                    <van-button :loading='loading' @click="updateOrderUserName" color="#27b5a7">确认修改</van-button>
                </div>
                <h4>办理人为实际到场办理检测业务人姓名</h4>
            </div>
        </van-popup>
        <div class="button" v-if="order.payTime">
            <van-button :disabled="order.refundStatus?true:false" :loading='loading' @click="btnClick('申请退费')" color="#27b5a7">申请退费</van-button>
            <van-button :loading='loading' @click="btnClick('服务评价')" color="#27b5a7">服务评价</van-button>
        </div>
        <div class="button" v-else>
            <van-button :loading='loading' @click="btnClick('点击缴费')" color="#27b5a7">点击缴费</van-button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            show:false,
            username:null,
            loading:false,
            order:[]
        }
    },
    created(){
        if (!this.$route.params.order) {
            this.$router.go(-1)
        } else {
            this.order = this.$route.params.order
            console.log(this.$route.params.order)
        }
    },
    methods:{
        //显示修改办理人弹框
        updateUsername(){
            this.show = true
        },
        //关闭弹窗
        closePopup(){
            this.username = null
        },
        //修改代理人
        async updateOrderUserName(){
            if (!this.username) {
                this.$toast('办理人姓名不能为空')
            } else {
                this.loading = true
                let res = await this.$api.updateOrderUserName({
                    orderId:this.order.id,
                    userName:this.username
                })
                if (res.status == 200) {
                    this.$toast(res.message)
                    this.order.username = this.username
                    this.loading = false
                    this.show = false
                }else{
                    this.$toast('修改失败')
                    this.loading = false
                    this.show = false
                }
            }
        },
        //修改预约时间
        updateTimes(){
            this.$router.push({
                name: 'progress',
                params: {
                    carInfo: this.order
                }
            })
        },
        //点击服务评价
        btnClick(e){
            console.log('当前点击了--------',e)
            if (e === '服务评价') {
                //跳转服务评价
                this.$router.push({
                    name: 'serviceRating',
                    params: {
                        carInfo:this.order
                    }
                })    
            } else if(e == '申请退费') {
                //跳转申请退费
                this.$router.push({
                    name: 'refund',
                    params: {
                        order:this.order
                    }
                })   
            }else{
                //跳转支付
                this.$router.push({
					name: 'orderPay',
					params: {
					carInfo: this.order
					}
				})
            }        
        }
    },
    filters:{
        dateStyle(v){
            let date = new Date(v)
            let Y = date.getFullYear()
            let M = date.getMonth()+1
            let D = date.getDate()
            let h = date.getHours()
            let m = date.getMinutes()
            let s = date.getMilliseconds()
            if (M<10) {
                M = '0'+M
            }
            if (D<10) {
                D = '0'+D
            }
            if (h<10) {
                h = '0'+h
            }
            if (m<10) {
                m = '0'+m
            }
            if (s<10) {
                s = '0'+s
            }
            let value =`${Y}-${M}-${D} ${h}:${m}:${s}`
            return value
        }
    },
}
</script>
<style lang="less">
    .content{
        .top,.btm{
            width: 96%;
            margin: .3rem auto;
            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
            padding: 0.3rem;
            box-sizing: border-box;
            border-radius: 0.1rem;
            position: relative;
            h3{
                font-size: 0.5rem;
                border-bottom: 1px solid #efefef;
                line-height: 0.8rem;
                font-weight: 800;
                text-align: center;
            }
            h4{
                font-size: 0.5rem;
                line-height: 0.8rem;
            }
            .btn{
                position: absolute;
                right: 0.3rem;
                bottom: 0.3rem;
                padding: 0.2rem 0.2rem;
                background-color:#ea4d18;
                color:#fff;
                border-radius: 0.1rem;
                width: auto;
            }
            ul{
                li{
                    line-height: 0.8rem;
                    font-size: 0.4rem;
                }
            }
        }
        .update_username{
            padding: 0.2rem 0.3rem;
            border-radius: 0.1rem;
            width: 90vw;
            h3{
                font-size: 0.6rem;
            }
            h4{
                text-align: center;
                color: red;
                border-top: 2px solid #efefef;
                font-size: 0.45rem;
                line-height: 0.8rem;
            }
            .center{
                text-align: center;
                margin: 0.3rem auto;
                button{
                    width: 3rem;
                    height: 1rem;
                    line-height: 1rem;
                }
                input{
                    margin: 0.2rem auto;
                }
            }
        }
        .button{
            width: 96%;
            margin: 0.4rem auto;
            display: flex;
            justify-content: space-between;
            button{
                width: 48%;
                height: 1.4rem;
                line-height: 1.4rem;
            }
        }
    }
</style>